<template>
  <el-dialog
    v-bind="$attrs"
    :model-value="modelValue"
    top="5vh"
    width="1062px"
    :append-to-body="true"
    :show-close="false"
    custom-class="welfare-dialog"
    :lock-scroll="false"
  >
    <div class="welfare-center">
      <div @click="closeDialog" class="close-dialog"></div>
      <Tabs v-model="activeTabKey">
        <Pane label="活动公告" name="notice">
          <Notice></Notice>
        </Pane>
        <Pane label="福利领取" name="welfare">
          <Welfare></Welfare>
        </Pane>
        <Pane label="福利ROLL房" name="roll">
          <Roll></Roll>
        </Pane>
        <Pane label="口令红包" name="redenvelope">
          <Redenvelope></Redenvelope>
        </Pane>
      </Tabs>
      <Sidebar></Sidebar>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, provide, reactive, toRefs } from "vue";
import Tabs from "./tabs/Index.vue";
import Pane from "./tabs/Pane.vue";
import Sidebar from "./sidebar/Index.vue";
import Notice from './tabs/Notice.vue'
import Redenvelope from "./tabs/Redenvelope.vue";
import Welfare from "./tabs/Welfare.vue";
import Roll from "./tabs/Roll.vue";
export default defineComponent({
  name: "WelfareCenter",
  props: {
    modelValue: Boolean,
  },
  components: {
    Tabs,
    Pane,
    Sidebar,
    Notice,
    Redenvelope,
    Welfare,
    Roll,
  },
  setup(props, { emit }) {
    const state = reactive({
      activeTabKey: "redenvelope",
    });

    provide("closeDialog", closeDialog)

    function closeDialog() {
      emit("update:modelValue", false);
    }

    return {
      ...toRefs(state),
      closeDialog,
    };
  },
});
</script>

<style lang="scss">
.welfare-dialog-mobile {
  display: none;
}
.welfare-dialog {
  background: transparent !important;

  .el-dialog__header {
    padding: 0 !important;
    display: none !important;
    opacity: 0 !important;
  }

  .el-dialog__body {
    padding: 0 !important;
    background: transparent !important;
    height: auto;
  }
}
@media screen and (max-width: 768px) {
  .el-dialog {
    margin: 0 !important;
  }
}
</style>

<style lang="scss" scoped>
.welfare-center {
  width: 100%;
  height: 700px !important;
  background-image: url(@/static/img/welfare/bg_welfare_center.png) !important;
  display: flex;
  justify-content: space-between;
  padding: 110px 32px 0 32px;
  position: relative;
  & .close-dialog {
    cursor: pointer;
    width: 52px;
    height: 52px;
    background-image: url(@/static/img/welfare/icon_close.png);
    position: absolute;
    top: 7px;
    right: 13px;
  }
}

@media screen and (max-width: 768px) {
  .welfare-center {
    display: block;
    width: 100%;
    height: auto !important;
    min-height: 100vh !important;
    background-image: url(@/static/img/welfare/bg_mobile_welfare_center.png) !important;
    background-size: 100%;
    background-color: #23155a;
    padding: 76px 0;

    & .close-dialog {
      cursor: pointer;
      width: 26px;
      height: 26px;
      background-image: url(@/static/img/welfare/icon_close.png);
      background-size: 100%;
      position: absolute;
      top: 5px;
      right: 5px;
    }
  }
}
</style>